<template>
  <div style="    margin-bottom: 1rem;">
    <main v-for="v in data" :key="v.id">
      <div style="position:relative" @click="v.alreadyUp = true" v-if="!v.alreadyUp">
        <img :src="v.images[0].url" alt="" />
        <i class="iconfont icon-bofang play"></i>
      </div>
      <video v-else :src="v.video.url" alt="" controls autoplay />
      <div class="main-title">
        <div class="main-left">
          <img :src="v.user.avatarurl" alt="" />
          {{ v.user.nickName }}
        </div>
        <div class="main-right">
          <span
            @click="
              v.user.followed ? v.upCount-- : v.upCount++;
              v.user.followed = !v.user.followed;
            "
            :style="{ color: v.user.followed ? 'red' : '#999' }"
          >
            <i class="iconfont icon-dianzan"></i>
            {{ v.upCount }}
          </span>
          <span>
            <i class="iconfont icon-pinglun"></i>
            {{ v.shareCount }}
          </span>
          <span @click="showShare = true">
            <i class="iconfont icon-fenxiang"></i>
          </span>
        </div>
      </div>
      <p>{{ v.title }}</p>
    </main>
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" />
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
main {
  color: #999;
  position: relative;
  video,
  img {
    width: 100%;
    height: 4rem;
  }
  .play {
    font-size: 1.2rem;
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    font-weight: 100;
    transform: translate(-50%, -50%);
  }
  .main-title {
    height: 1rem;
    line-height: 1rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.3rem;
    img {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
      vertical-align: middle;
    }
    .main-right {
      span {
        margin-left: 0.3rem;
        i {
          vertical-align: middle;
        }
      }
    }
  }
  p {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.35rem;
    width: 100%;
    color: white;
    word-wrap: break-word;
    padding: 0.1rem;
    box-sizing: border-box;
  }
}
</style>
